<template>
  <div class="card-wrap">
    <p class="first-title" :style="item.sty">{{item.FirstTitle}}</p>
    <p class="second-title">{{item.SecondTitle}}</p>
    <img 
      :src="item.url"
      alt
    />
  </div>
</template>
<script>
export default {
    props:["item","index"],
  name: "smallcard"
};
</script>
<style>

.first-title {
  color: rgb(0, 0, 0);
  font-weight: 700;
  font-size: 18px;
}
.card-wrap {
  width: 25%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  padding: 7px 0 5.5px 11px;
}
.card-wrap img{
    width: 100%;
    padding: 6.6px 0 0 4.4px;
}
.second-title {
  color: #666771;
  font-size: 12px;
}
</style>